<template>
  <div class="app-container">
    <el-form
      ref="postForm"
      :model="postForm"
      label-position="right"
      label-width="130px"
    >
      <sticky :class-name="'sub-navbar'">
        <el-button
          type="primary"
          icon="el-icon-edit-outline"
          @click="submitConfigData"
        >
          提交
        </el-button>
      </sticky>
      <el-tabs type="border-card">
        <el-tab-pane v-for="item in configMenu" :key="item.id" :label="item.cn_name">
          <tn-form-item
            v-for="child_item in item._child"
            :key="child_item.id+'parent'+child_item.en_name"
            v-model="postForm[child_item.en_name]"
            :label="child_item.cn_name"
            :name="child_item.en_name"
            :type="child_item.type"
            :tips="child_item.tips"
            :placeholder="'请输入' + child_item.cn_name"
            :multi-select-value="child_item.values !=='' ? child_item.values : []"
            save-dir-name="system_config"
          />
        </el-tab-pane>
      </el-tabs>
    </el-form>
  </div>
</template>

<script>
import Sticky from '@/components/Sticky'
import TnFormItem from '@/components/TNFormItem'
import { getConfigMenu, updateConfigMenuData } from '@/api/system-config'

export default {
  name: 'SystemConfigMenu',
  components: { Sticky, TnFormItem },
  data() {
    return {
      configMenu: [],
      postForm: {}
    }
  },
  created() {
    this.getMenuData()
  },
  methods: {
    getMenuData() {
      getConfigMenu().then(response => {
        const { data } = response
        // console.log(data)
        this.configMenu = data
        // 取出所有的字段名称和对应的值
        this.getPostFormData(data)
      })
    },
    getPostFormData(data) {
      data.forEach((item) => {
        if (item.en_name !== '') {
          this.postForm[item.en_name] = item.value
        }
        if (item._child && item._child.length > 0) {
          this.getPostFormData(item._child)
        }
      })
    },
    submitConfigData() {
      const config_menu_data = Object.assign({}, this.postForm)
      // console.log(config_menu_data)
      updateConfigMenuData(config_menu_data).then(response => {
        this.$notify({
          title: '成功',
          message: response.msg,
          type: 'success',
          duration: 2000
        })
      })
    }
  }
}
</script>

<style lang="scss" scoped>
</style>
